<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <%- include('../component/head') %>
</head>
<body>
<div id="fh5co-page">


    <!-- 左边菜单 -->
    <%- include('../component/admin/left_menu') %>


    <div id="fh5co-main">
        <%- include('../component/admin/banner') %>

        <div class="row">

            <div class="col">
                <div class="card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between">
                        <h6 class="mb-0 align-self-center" style="color: white;">博客列表</h6>
                    </div>
                    <div class="card-body" id="tables">

                        <vxe-toolbar>
                            <template #buttons>
                                <a href="/admin/release.mgt"><vxe-button icon="fa fa-plus">发表博客</vxe-button></a>
                            </template>

                        </vxe-toolbar>
                            <vxe-form :data="formData1" @submit="searchEvent" @reset="resetEvent">

                                <vxe-form-item title="是否推荐" field="hot" :item-render="{}">
                                    <template #default="{ data }">
                                        <vxe-select v-model="data.hot" placeholder="请选择是否推荐" clearable>
                                            <vxe-option value="1" label="推荐"></vxe-option>
                                            <vxe-option value="0" label="不推荐"></vxe-option>
                                        </vxe-select>
                                    </template>
                                </vxe-form-item>

                                <vxe-form-item title="选择标签" field="la_id" :item-render="{}">
                                    <template #default="{ data }">
                                        <vxe-select v-model="data.la_id" placeholder="请选择标签" clearable>
                                            <vxe-option v-for="la in labels" :key="la.index" :value="la.id" :label="la.la_name"></vxe-option>
                                        </vxe-select>
                                    </template>
                                </vxe-form-item>
                                <vxe-form-item>
                                    <template #default>
                                        <vxe-button type="submit" status="primary"><i class="icon-search3"></i>搜索</vxe-button>
                                    </template>
                                </vxe-form-item>
                            </vxe-form>

                        <vxe-table
                                border
                                resizable
                                show-overflow
                                highlight-hover-row
                                ref="xTable"
                                height="500"
                                :data="tableData"
                                @cell-dblclick="cellDBLClickEvent">


                            <vxe-table-column type="seq" width="60"></vxe-table-column>
                            <vxe-table-column field="id" title="id"></vxe-table-column>
                            <vxe-table-column field="title" title="标题"></vxe-table-column>
                            <vxe-table-column field="hot" title="是否推荐">
                                <template #default="{ row }">
                                    <template>
                                        <template v-if="row.hot == 1">
                                            <vxe-switch v-model="Boolean(true)" open-label="是"></vxe-switch>
                                        </template>
                                        <template v-else>
                                            <vxe-switch v-model="Boolean(false)" colse-label="否"></vxe-switch>
                                        </template>
                                    </template>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column field="hits" title="观看人数" show-overflow></vxe-table-column>

                            <vxe-table-column field="thumbnail" title="图片地址"  show-overflow>
                                <template #default="{ row }">
                                    <img v-if="row.thumbnail" :src="row.thumbnail" style="width: 100px;margin: 5px">
                                    <span v-else>无</span>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column field="la_id" title="标签" show-overflow>
                                <template #default="{row}">
                                    <vxe-select v-model="row.la_id" placeholder="默认尺寸">

                                        <vxe-option v-for="la in labels" :key="la.index" :value="la.id" :label="la.la_name"></vxe-option>

                                    </vxe-select>
                                </template>

                            </vxe-table-column>

                            <vxe-table-column title="编辑博客" width="160">
                                <template #default="{ row }">
                                    <template>
                                        <a :href="'/blog/toEditBlog/' + row.id"><vxe-button>编辑博客</vxe-button></a>
                                    </template>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column title="操作" width="100" show-overflow>
                                <template #default="{ row }">
                                    <vxe-button type="text" icon="fa fa-trash-o" @click="removeEvent(row)"></vxe-button>
                                </template>
                            </vxe-table-column>
                        </vxe-table>



                        <vxe-pager
                                :current-page.sync="page4.currentPage"
                                :page-size.sync="page4.pageSize"
                                :total="page4.totalResult"
                                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
                        </vxe-pager>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<%- include('../component/admin/foot') %>
<script>
    const $VXE = VXETable.modal;
    const $XSaveFile = VXETable.saveFile;
    const $XReadFile = VXETable.readFile;
    new Vue ({
        el: '#tables',
        data: {
            labels:'',
            submitLoading: false,
            tableData: [],
            selectRow: null,
            formData1: {
                hot:'',
                la_id:''

            },
            page4: {
                currentPage: 1,
                pageSize: 10,
                totalResult: 7
            },
        },
        created () {
            this.getData();
            mainFun();
        },
        methods: {
            getData() {
                XEAjax.post('/blog/getAllArticle').then((res) => {
                    if (res.msg === 's') {
                        this.tableData = res.ArticleList;
                        this.labels = res.labels;
                        $VXE.message({message: "文章数据更新", status: 'success'});
                    } else {
                        $VXE.message({message: "获取文章失败", status: 'error'});
                    }
                }).catch((err) => {
                    $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                });
            },


            submitEvent2 () {
                this.loading2 = true
                setTimeout(() => {
                    this.loading2 = false
                    VXETable.modal.message({ message: '保存成功', status: 'success' })
                }, 1000)
            },
            searchEvent (fromData) {
                if (!fromData.data.la_id && !fromData.data.hot) {
                    this.getData();
                    return;
                }
                XEAjax.post('/blog/getArticles', fromData.data).then(res => {
                    this.tableData = res.ArticleList;
                    this.labels = res.labels;
                    VXETable.modal.message({ message: '查询事件', status: 'info' })
                }).catch(err => { });

            },
            resetEvent () {
                VXETable.modal.message({ message: '重置事件', status: 'info' })
            },
            cellDBLClickEvent ({ row }) {
                /*this.editEvent(row)*/
            },
            removeEvent (row) {
                VXETable.modal.confirm('您确定要删除该数据?').then(type => {
                    XEAjax.post('/blog/delArticle', row).then((res) => {
                        $VXE.message({message: '删除文章', status: 'info'});
                        this.getData();
                    }).catch(err => {
                        $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                    });
                })
            },
            editEvent(row) {/* 编辑博客 */
                console.log(row);
                VXETable.modal.confirm('你确定要编辑博客么？').then(type => {

                })
            }
        }
    })
</script>
</body>
</html>
